<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<script type="text/javascript">
var functionDataGrid = $('#function-datagrid-json').datagrid({
    gridTitle : '',
    showToolbar: true,
    filterThead: false,
    filterAll: true,
    showLinenumber: false,
    sortAll : true,
    dataUrl: 'function/list.do?systemId=${systemId}',
    dataType: 'json',
    columns: [
    	{
			name: '',
			label: '操作',
			align: 'center',
			width: 190,
			quicksort:false,
			menu: false,
			edit: false,
			render: function(value){
		        var html = '';
		        html += '<div class="btn-group" role="group"><button type="button" class="btn btn-blue btn-sm" onclick="mangeFunctionAction(this);"><i class="fa fa-edit"></i> 动作</button></div>';
		    	html += '<div class="btn-group" role="group"><button type="button" class="btn btn-blue btn-sm" onclick="editFunction(this);"><i class="fa fa-edit"></i> 编辑</button></div>';
			    html += '<div class="btn-group" role="group"><button type="button" class="btn btn-red btn-sm" onclick="delFunction(this);"><i class="fa fa-remove"></i> 删除</button></div>';
			    return html;
			}
        },
        {
            name: 'funName',
            label: '功能菜单名称',
            align: 'center',
            width: 100
        },
        {
            name: 'funId',
            label: '功能菜单编码',
            align: 'center',
            width: 200
        },
        {
            name: 'parentFunId',
            label: '上级菜单编码',
            align: 'center',
            width: 200
        },
        {
            name: 'linkPage',
            label: '链接地址',
            align: 'center',
            width: 350
        },
        {
            name: 'displayFlag',
            label: '是否显示',
            align: 'center',
            type : "select",
            items: [{'Y':'是'}, {'N':'否'}],
            render: $.datagrid.renderItem,
            width: 80
        },
        {
            name: 'funIndex',
            label: '显示顺序',
            width: 80,
            align: 'center',
            type : 'spinner'
        },
        {
            name: 'openIcon',
            label: '打开图标',
            width: 100,
            align: 'center'
        },
        {
            name: 'closeIcon',
            label: '关闭图标',
            width: 100,
            align: 'center'
        }
        
    ],
    paging: {pageSize:20, selectPageSize:'20,30,40'},
    showTfoot: true,
    fullGrid: false,
    toolbarCustom: function(){
    	var html = '';
    	html += '<div class="btn-group" role="group"><button type="button" class="btn btn-blue" onclick="addFunction()"><i class="fa fa-plus"></i> 添加</button></div>';
	    html += '<div class="btn-group" role="group"><button type="button" class="btn btn-green" onclick="refreshFunctionDataGrid()"><i class="fa fa-refresh"></i> 刷新</button></div>';
	    return html;
    }
});
try {
	functionDataGrid.data('bjui.datagrid').colLock(0, true);
} catch (e) {}

function addFunction() {
	$('#edit-function-dialog').dialog({
		id:'add-function-dialog', 
		url:'function/add.do', 
		maxable: false,
		resizable:false,
		mask: true,
		width: 850,
		height: 250,
		onLoad: function($dialog){
			setEditFunctionBtnEvent($dialog, true);
		},
		title:'添加功能菜单'
	});
}

function mangeFunctionAction(_this) {
	var functionIndex = $(_this).closest("tr").index();
	var data = functionDataGrid.data('bjui.datagrid').getRowData(functionIndex);
	$('#edit-function-dialog').dialog({
		id:'mange-function-action-dialog', 
		url:'function/action/index.do?funSn=' + data.funSn + '&systemId=${systemId}', 
		maxable: false,
		resizable:false,
		mask: true,
		width: 850,
		height: 500,
		onLoad: function($dialog){
			var $cancel = $dialog.find('.cancel');
			$cancel.click(function(){
				$dialog.dialog('closeCurrent');
			});
		},
		title:'编辑功能动作-' + data.funName
	});
}

function editFunction(_this) {
	var functionIndex = $(_this).closest("tr").index();
	var data = functionDataGrid.data('bjui.datagrid').getRowData(functionIndex);
	$('#edit-function-dialog').dialog({
		id:'edit-function-dialog', 
		url:'function/edit.do', 
		maxable: false,
		resizable:false,
		mask: true,
		width: 850,
		height: 250,
		onLoad: function($dialog){
			setEditFunctionBtnEvent($dialog, true, functionIndex);
			getJsonData2Form('function/getFunc.do', 'funSn='+data.funSn, $('#function_form'), null);
		},
		title:'编辑功能菜单'
	});
}

function delFunction(_this) {
	var functionIndex = $(_this).closest("tr").index();
	var rowData = functionDataGrid.data('bjui.datagrid').getRowData(functionIndex);
	functionDataGrid.alertmsg('confirm', '确定删除当前数据？', 
	{
			okName:'确定', 
			cancelName:'取消', 
			title:'提示信息',
			okCall : function(){
				var url = "function/del.do?funSn="+rowData.funSn;
				var data = null;
				var successCallBack = function(result){
					refreshFunctionDataGrid();
				}
				var failCallBack = null;
				var errorCallBack = null;
				myAjax(url, data, true, successCallBack, failCallBack, errorCallBack);
        	}
	});
}

function setEditFunctionBtnEvent($dialog, isAdd, trIdx) {
	var $prev, $next, $save, $cancel;
	$save = $dialog.find('.save');
	$cancel = $dialog.find('.cancel');
	$save.click(function(){
		$('#function_form').isValid(function(v) {
			if(v){
				var url = 'function/save.do';
				var data = $('#function_form').serialize()+"&addFlag="+isAdd+"&systemId=${systemId}";
				var successCallBack = function(result){
					$dialog.dialog('closeCurrent');
					refreshFunctionDataGrid();
				}
				var failCallBack = null;
				var errorCallBack = null;
				myAjax(url, data, true, successCallBack, failCallBack, errorCallBack);
			}
		});
	});

	$cancel.click(function(){
		$dialog.dialog('closeCurrent');
	});
}

function refreshFunctionDataGrid() {
	functionDataGrid.datagrid("refresh");
}
</script>
<div class="bjui-pageContent" id="function-index-pagecontent">
    <div style="padding:0px; height:99%; width:100%;">
        <table id="function-datagrid-json" data-width="100%" data-height="100%" class="table table-bordered">
        </table>
    </div>
</div>
<div id="edit-function-dialog" style="display: none;">
</div>